<template>
	<div class="container">
		<div class="top">
			<ul class="top-item">
				<li v-for="(item,index) in classList" :key="item.id">
					<i :class="[item.class]"></i>
					{{item.info}}
				</li>
			</ul>
			<ul class="top-item-second">
				<li v-for="(item,index) in btnList" :key="index">
					{{item}}
				</li>
			</ul>
		</div>
		<div class="buttom">
			<div class="box">
				<span>触屏版</span>
				<span>电脑板</span>
			</div>
			<div class="info">Qunar 京ICP备05021087</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				classList:[
					{
						id:'0001',
						class:'iconfont iconfeiji_',
						info:'机票'
					},
					{
						id:'0002',
						class:'iconfont icontubiaov-daochushangchuan-',
						info:'酒店'
					},
					{
						id:'0003',
						class:'iconfont iconxuexiao-',
						info:'公寓'
					},
					{
						id:'0004',
						class:'iconfont icongengduo',
						info:'更多'
					}
				],
				btnList:['登陆','我的订单','最近浏览','关于我们']
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.container
		color: #212121;
		background: #f3f3f3;
		.top
			border-bottom  1px solid #ccc
			.top-item
				padding 0 0.4rem
				display flex
				color gray
				justify-content flex-end
				font-size: 0.3rem;
				line-height: 0.7rem;
				i
					padding-left .3rem
			.top-item-second
				padding 0 0.4rem
				display flex
				color gray
				justify-content flex-start
				font-size: 0.3rem;
				line-height: 0.5rem;
				li
					margin 0 .1rem
					color skyblue
		.buttom
			.box
				width 3rem
				// background-color red
				margin 0 auto
				display flex
				span
					line-height 0.6rem
					text-align center
					flex 1
			.info
				text-align center
				padding 0.1rem  0 0.2rem
</style>
